JavaScript manejo del MOUSE y TECLADO

En este grupo se pueden incluir los siguientes eventos:

onMouseOver: activado cuando el ratón se mueve por encima de un objeto;

onMouseOut: activado cuando el ratón sale de un objeto;

onMouseMove: se mueve el cursor del ratón, pero dado que esto sucede a menudo (el uso del ratón es frecuente), no está disponible como opción por defecto, sino tan sólo unida a la captura de eventos, que se explicará a continuación.

Los eventos onMouseOver y onMouseOut son complementarios ya que el primero se activa en el momento en que el cursor se coloca en el área del objeto cuya marca contiene el evento, mientras que el segundo lo hace cuando sale.

Los eventos onMouseOver y onMouseOut adquieren de la versión 1.0 a la 1.1 de Javascript la capacidad de estar asociados a la marca AREA, por lo que puede operar también con  los  mapas clicables;  para Netscape,  sin  embargo,  debe estar asociado también a la marca HREF, es decir, a un enlace, aunque ficticio.

MARCAS SENSIBILES

Otro límite es el impuesto a Netscape y las viejas versiones de Explorer por las marcas a las que el evento puede ser asociado:

ROLLOVER

De enorme importancia es el evento onMouseOver combinado con onMouseOut para crear el efecto RollOver.

La sintaxis es muy sencilla:

<A HREF=»#» onmouseover=»document.images[num].src=’imagen.gif'» onmouseout=document.images[num].src=’imagen1.gif'»>

donde la almohadilla sustituye a cualquier otro enlace, mientras que num es el número de índice de la imagen en la página HTML.

Hace algunos años, cuando no existían programas como Flash, el rollover era el efecto gráfico de mayor difusión y seguramente el más apropiado para convertir en dinámico un sitio y animar elementos estáticos como los menús y las barras de navegación.

Como ejemplo, inserto un rollover algo complejo, el que puede activarse con un mapa clicable. Hay que destacar que para funcionar en Netscape hace falta añadir en cualquier caso un enlace al área sensible, resaltada en rojo (incluso si ha sido sustituido por el signo almohadilla), mientras que en Explorer se puede omitir.

<area                                        shape=»rect»                                        coords=»2,2,59,26″ onmouseover=»document.images[num].src=’images/tre.gif'» href=»#»>

EVENTOS DEL TECLADO

En este grupo se pueden incluir los siguientes eventos:

1. onKeyPress: evento que se activa cuando un usuario pulsa y deja de pulsar una tecla o también cuando la mantiene pulsada;
2. onKeyDown: activado cuando se pulsa la tecla;
3. onKeyUp: activado cuando una tecla, que se había pulsado, deja de pulsarse;
4. onHelp: activado cuando se pulsa la tecla F1;

El último evento se ha insertado en este sector aun cuando se activa sólo mediante la tecla F1.

Cada tecla tiene asignado un número en javascript, algunos de estos son:

Ya conociendo los números correspondientes a cada tecla solo nos basta con trabajar con Eventos en JavaScript, por ejemplo si queremos ver que tecla presiono en un input el código seria el siguiente:

<input type=»text» onkeydown=»tecla(event);» />

y el Javascript

<script type=»text/javascript»>

function tecla (e)

{

var evt = e ? e : event;

var key = window.Event ? evt.which : evt.keyCode;

alert (key);

}

</script>

Podemos hacer un if y dependiendo de la tecla (según su key) realizar alguna acción, como llamar una función por ejemplo o no permitir el ingreso en el input de

caracteres no permitidos, por ejemplo si queremos que en un input no ingresen letras sino solo números, el código y su función seria algo así:

El input:

<input type=»text» onkeypress=»return num(event);» /> El Javascript:

<script type=»text/javascript»>

function num(e) {

evt = e ? e : event;

tcl = (window.Event) ? evt.which : evt.keyCode;

if ((tcl < 48 || tcl > 57) && (tcl != 8 && tcl != 0 && tcl != 46))

{

return false;

}

return true;

}

</script>

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros